@import "../common/init";
@import "../common/constants";
@import "../common/header";
@import "../common/body";
@import "../common/footer";

.main{
    .wrapper{
        //版心主要内容
        .container-wrapper {
            .main-wrapper {
                float: left;
                width: $mainBoxWidth;

                //轮播图
                .banner-group {
                    width: 100%;
                    height: $bannerHeight;
                    overflow: hidden;
                    background-color: #0e257e;
                    position: relative;

                    .banner-ul {
                        overflow: hidden;
                        width: $bannerWidth * 4;
                        position: absolute;

                        li {
                            float: left;
                            width: $bannerWidth;
                            height: $bannerHeight;

                            img {
                                width: $bannerWidth;
                                height: $bannerHeight;
                            }
                        }
                    }

                    .arrow {
                        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                        font-size: 70px;
                        color: white;
                        display: none;
                        position: absolute;
                        background-color: rgba(0, 0, 0, .4);
                        cursor: pointer;
                        top: 50%;
                        transform: translateY(-50%);
                        transition: all 0.5s;
                        user-select: none;

                        &:hover {
                            color: $themeColor;
                            opacity: .5;
                            background-color: rgba(0, 0, 0, .5);
                        }
                    ;
                    }

                    .left-arrow {
                        left: 20px;
                    }

                    .right-arrow {
                        right: 20px;
                    }

                    .page-control-group {
                        position: absolute;
                        bottom: 5px;
                        left: 50%;
                        transform: translatex(-50%);

                        .page-control {
                            li {
                                float: left;
                                width: 20px;
                                height: 20px;
                                border-radius: 50%;
                                background-color: rgba(255, 255, 255, .2);
                                cursor: pointer;

                                &:nth-child(n+2) {
                                    margin-left: 5px;
                                }

                                &.current {
                                    background-color: $themeColor;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.main{
    .wrapper{
        .container-wrapper {
            .main-wrapper {
                .list-outer-group {
                    background-color: #fff;
                    margin-top: 14px;

                    .list-tag {
                        width: 100%;
                        height: 66px;
                        overflow: hidden;
                        border: 1px solid $lineColor;
                        border-left: none;
                        border-right: none;

                        li {
                            float: left;
                            padding: 0 10px;
                            margin-top: 20px;

                            a {
                                color: $assistFontColor;
                            }

                            &:first-of-type {
                                border-left: 5px solid $themeColor;
                            }

                            &.active {
                                a {
                                    color: $mainFontColor;
                                }
                            }
                        }
                    }

                    .list-inner-group {
                        li {
                            padding: 20px;
                            overflow: hidden;
                            border-bottom: 1px solid $lineColor;

                            .thumbnail-group {
                                float: left;
                                width: 226px;
                                height: 162px;

                                a {
                                    img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }

                            .article-group {
                                float: right;
                                width: 504px;
                                height: 162px;
                                position: relative;

                                .title {
                                    font-size: 22px;

                                    a {
                                        color: $mainFontColor;

                                        &:hover {
                                            color: $themeColor;
                                        }
                                    }
                                }

                                .desc {
                                    color: $assistFontColor;
                                    font-size: 14px;
                                    margin-top: 10px;
                                }

                                .more {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    bottom: 0;
                                    color: $assistFontColor;

                                    .category {
                                        color: $themeColor;
                                    }

                                    .pub-time {
                                        float: right;
                                        margin-left: 20px;
                                    }

                                    .author {
                                        float: right;
                                    }
                                }
                            }
                        }
                    }

                    .load-more-group {
                        padding: 20px 0;
                        text-align: center;

                        .load-more {
                            width: 402px;
                            height: 40px;
                            user-select: none;
                            background-color: #d2dcea;
                            color: #6d85ac;
                            border-radius: 5px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
